<template>
  <div class="bg-nav mine">
    <div class="padding-bottom-60">
      <van-cell :border="border" :center="center"    :is-link="isLink">
        <div class="vertical-center">
          <img src="./../../assets/img/head_2.jpeg"/>
          <div class="width-100">
            <div class="left-right">
              <span class="contact-name">阿呆</span>
            </div>
            <div class="left-right">
              <span class="chat-gery-l contact-message">微信号:steve@123456.qq.com</span>
            </div>
          </div>
        </div>
      </van-cell>
      <br/>
      <van-cell-group>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/pay.png"/>
            <span class="mine_line_title">支付</span>
          </div>
        </van-cell>
      </van-cell-group>
      <br/>
      <van-cell-group>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/shoucang.png"/>
            <span class="mine_line_title">收藏</span>
          </div>
        </van-cell>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/photo.png"/>
            <span class="mine_line_title">相册</span>
          </div>
        </van-cell>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/card.png"/>
            <span class="mine_line_title">卡包</span>
          </div>
        </van-cell>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/biaoqing.png"/>
            <span class="mine_line_title">表情</span>
          </div>
        </van-cell>
      </van-cell-group>
      <br/>
      <van-cell-group>
        <van-cell :border="border" :center="center"   size="large" :is-link="isLink">
          <div class="mine_line">
            <img src="./../../assets/img/setting.png"/>
            <span class="mine_line_title">设置</span>
          </div>
        </van-cell>
      </van-cell-group>
    </div>

  </div>
</template>

<script>
  import headerMain from '../common/header-main.vue';
  import Vue from 'vue';
  import { Cell, CellGroup  } from 'vant';
  Vue.use(Cell).use(CellGroup);
  export default {
    name:'Found',
    components:{
      headerMain
    },
    data(){
      return{
        //是否显示边框
        border:true,
        center:true,
        //开启箭头并开启点击反馈
        isLink:true,
      }
    }
  }
</script>

<style scoped>
  .mine{
    width: 100%;
    height: 93vh
  }
  .mine_line{
    display: flex;
    align-items: center;
  }
  .mine_line img{
    width: 20px;
    height: 20px;
  }
  .mine_line_title{
    font-size: 16px;
    font-weight: inherit;
    margin-left: 16px;
  }

  .vertical-center{
    height: 100px;
  }
  .vertical-center img{
    width: 60px;
    height: 60px;
    border-radius: 3px;
  }
  .contact-name{
    font-size: 18px;
    /* font-family: sans-serif; */
    font-weight: inherit;
    margin-left: 16px;
  }
  .contact-date{
    font-size: 12px;
  }
  .contact-message{
    font-size: 12px;
    margin-left: 16px;
  }
</style>
